<template lang="html">
    <div class="zh-common-title">
        <div class="zh-common-title-icon" @click="menuPlay(false)">
            <img src="/static/image/i-switch.png" width="20" :class="menuShow ? 'zh-rotate' : 're-rotate'">
        </div>
        <ul class="zh-common-title-text">
            <slot name="menuBefore"></slot>
            <li v-if="comTitle" v-text="comTitle">></li>
            <slot></slot>
            <!-- <nav-head><li class="gap">&gt;</li><li>平台信息管理</li></nav-head> -->
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            comTitle: '',
            menuNavRouteData: deep_clone(this.$store.getters.leftMenuNav),
        }
    },
    created() {
        this.checkTitle();
        // console.log(JSON.parse(JSON.stringify(this.$store.getters.leftMenuNav)))
    },
    computed: {
        menuShow() {
            return deep_clone(this.$store.getters.menuNavFlag);
        }
    },
    methods: {
        menuPlay() {
            this.$store.commit( 'SET_MENUNAV', !this.menuShow )
        },
        checkTitle() {/*设置title*/
            let _this = this;
            let pathSplit = _this.$route.fullPath.split('/');
            _this.menuNavRouteData.children.forEach((item,index)=> {
                if(item.path == pathSplit[2]) {
                    item.children.forEach((cur,cur_i)=> {
                        if(cur.path == pathSplit[3]) {
                            this.comTitle = cur.txtName;
                        }
                    })
                }
            })
        }
    },
    watch:{
        $route(to, from) {
            this.checkTitle();
        }
    }
}
</script>

<style lang="scss">
.zh-common-title {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e6e6e6;

    .zh-common-title-icon {
        flex: 0 0 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-right: 1px solid #e6e6e6;
        overflow: hidden;

        img {
            display: inline-block;
            vertical-align: middle;
        }
    }

    .zh-common-title-text {
        padding-left: 12px;

        .gap {
            margin: 0 6px;
        }
        
        li {
            display: inline-block;

            &:last-child {
                color: #999;
            }

            &:first-child {
                color: #000;
            }
        }
    }
}
</style>
